<template>
  <n-space style="margin-left: 5%; margin-top: 0.5%;">
    <div style="display: flex; align-items: center; gap: 20px;">
      <n-select v-model:value="value" :options="options" style="width: 100px;" placeholder="选择难度" />
    </div>
    <n-input placeholder="搜索题号" style="width: 300px;">
      <template #prefix>
        <n-icon>
          <search-icon />
        </n-icon>
      </template>
    </n-input>
    <n-button type="primary">搜索</n-button>
  </n-space>
  <n-data-table
    :columns="columns"
    :data="problems"
    :pagination="pagination"
    style="margin-top: 20px; margin-left: 5%; width: 90%;"
  />
</template>

<script lang="ts">
import { defineComponent, ref, h } from "@vue/runtime-core";
import { SearchOutline as SearchIcon } from "@vicons/ionicons5"
import { NTag, NButton } from "naive-ui";
import router from "@/router";
import { toGetQuestions } from '@/utils/Questions'
import { problems } from '@/models/questions'

interface Row {
  problemNo: number;
  titleName: string;
  difficulty: string;
  tags: string;
}

const options = [
  {
    label: '简单',
    value: 'easy',
    type: 'primary'
  },
  {
    label: '一般',
    value: 'normal',
    type: 'warning'
  },
  {
    label: '困难',
    value: 'hard',
    type: 'error'
  }
];

const createColumns = () => {
  return [
    {
      title: '题号',
      key: 'problemNo',
      align: 'center',
      render(row: Row) {
        const btn = h(NButton, {
          text: true,
          onClick: () => router.push('/questions/' + row.titleName)
        },
          { default: () => row.problemNo })
        return btn;
      }
    },
    {
      title: '题目名称',
      key: 'titleName',
      align: 'center',
      render(row: Row) {
        const btn = h(NButton, {
          text: true,
          onClick: () => router.push('/questions/' + row.titleName)
        },
          { default: () => row.titleName })
        return btn;
      }
    },
    {
      title: '难度',
      key: 'difficulty',
      align: 'center',
      render(row: Row) {
        const difficulty = h(
          NTag, {
          type: row.difficulty == '简单' ? 'primary' : row.difficulty == '一般' ? 'warning' : 'error'
        },
          { default: () => row.difficulty }
        );
        return difficulty;
      }
    },
    {
      title: '标签',
      key: 'tags',
      align: 'center',
      render(row: Row) {
        const tags = h(
          NTag, {
          type: 'info'
        },
          { default: () => row.tags }
        )
        return tags;
      }
    }
  ]
};

export default defineComponent({
  created(){
    this.setQuestions();
  },
  components: { SearchIcon },
  setup() {
    return {
      value: ref(null),
      problems: ref<problems[]>(),
      columns: createColumns(),
      pagination: { pageSize: 10 },
      options: options
    }
  },
  methods: {
    link2problemnum(num: number) {
      this.$router.push('/questions/' + num);
    },
    async setQuestions() {
      const data = await toGetQuestions();
      console.log(data);
      if (data) this.problems = data;
    }
  }
})
</script>